<!--头部公共部分-->
{include file="common/header" /}
<link rel="stylesheet" href="/education/css/style.css">

<div class="x-nav">
      <span class="layui-breadcrumb">
        <a>首页</a>
        <a>设置</a>
        <a>
          <cite>字典管理</cite></a>
      </span>
    <a class="layui-btn layui-btn-xs layui-btn-small" style="float:right;margin-top: 10px;"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh"></i> </a>
</div>
<div id="wodekehu" class="x-body" class="clear:both;">
    <div class="layui-row"
         style="padding-left:20px;border-left:1px solid #e5e5e5;padding-top:20px;border-right:1px solid #e5e5e5;">
        <div class="layui-form layui-col-md12 x-so layui-form-pane">
            <div class="layui-input-inline">
                <select name="type" lay-filter="type">
                    <option value="">请选类型</option>
                    {volist name="types" id="type"}
                    <option value="{$type.type}">{$type.type_name}</option>
                    {/volist}
                </select>
            </div>
            <button class="layui-btn" data-type="reload" id="search"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button class="layui-btn layui-btn-danger" id="clear"><i class="layui-icon">&#xe639;</i>清除</button>
            <a href="javascript:;" type="button" class="layui-btn layui-bg-blue" id="table-add"><i class="layui-icon">&#xe608;</i>字典新增</a>
            <a href="{:url('config/type')}" type="button" class="layui-btn layui-bg-blue" id="type-add"><i class="layui-icon">&#xe655;</i>类型新增</a>
        </div>
    </div>
    <table class="layui-table" id="datalist" lay-filter="Event"></table>

    <script type="text/html" id="barTable">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>{{# if(d.status == 0){ }}
        <a class="layui-btn layui-btn-xs" style="background-color: #009688" lay-event="check">激活</a>{{# } else { }}
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="check">禁用</a>{{# } }}
    </script>
</div>
<!--底部公共部分-->
{include file="common/footer" /}
<script>
    layui.use(['table', 'element', 'laydate'], function() {
        var table = layui.table,
            element = layui.element,
            laydate = layui.laydate,
            $ = layui.$;

        $('#table-add').click(function() {
            var url = '{:url("config/add")}';
            layer.open({
                type: 2,
                title: '新增',
                shadeClose: true,
                shade: 0.8,
                area: ['90%', '90%'],
                content: url
            });
        });

        //方法级渲染
        var tableIns = table.render({
            elem: '#datalist',
            url: '{:url("Config/dictionary")}',
            method: 'POST',
            cols: [[
                {field: 'id', title: 'ID', width: 100, sort: true, fixed: false },
                {field: 'name', title: '字典名称', width: 150 , align: 'center'},
                {field: 'type_name', title: '所属类型', width: 200 , align: 'center'},
                {field: 'describe', title: '类型描述', width: 200  , align: 'center' },
                {field: 'create_time', title: '创建时间', width: 200 , align: 'center'},
                {field: 'update_time', title: '更新时间', width: 200 , align: 'center'},
                {title: '操作', fixed: 'right', width: 150, align: 'center', toolbar: '#barTable'},
            ]],
            page: true,
            height: 'full-234',
            done: function (res, curr, count) {
                $("[data-field='id']").css('display','none');
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            }
        });
        //监听工具条
        table.on('tool(Event)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') { //删除
                layer.confirm('真的删除么', function (index) {
                    var isLoad;
                    $.post("{:url('config/auth_del')}", {id: data.id}, function (result) {
                        if (result.code == 0) {
                            layer.msg(result.msg, {time: 2000});
                            setTimeout(function () {
                                obj.del(); //删除对应行（tr）的DOM结构
                                location.reload();
                            }, 2000)
                        } else {
                            layer.msg(result.msg, {icon: 2, time: 2000});
                        }
                    }, "json")
                });
            } else if (layEvent === 'edit') {
                //编辑
                //do something
                var url = '{:url("config/edit")}?id=' + data.id;
                layer.open({
                    type: 2,
                    title: '编辑',
                    shadeClose: true,
                    shade: 0.5,
                    area: ['90%', '90%'],
                    content: url
                });
            } else if (layEvent === 'check') {
                var status;
                if (data.status == 0) {
                    status = 1;
                } else {
                    status = 0;
                }
                //激活与禁用状态改变
                $.post("{:url('Config/check_status')}", {
                    id: data.id,
                    status: status
                }, function (rJson) {
                    if (rJson.code === 1) {
                        layer.msg(rJson.msg, {
                            time: 2000
                        });
                        setTimeout(function () {
                            location.reload();
                        }, 2000)
                    } else {
                        layer.msg(rJson.msg, {
                            icon: 2,
                            time: 2000
                        });
                    }
                }, "json")
            }
        });
        //搜索项
        $('#search').click(function() {
            var field = {};
            field.type = $('select[name=type] option:selected').val();
            console.log(field);
            tableIns.reload({
                where: field,
                method: 'POST',
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
        //清除
        $('#clear').click(function() {
            $('.layui-form-pane').find('.layui-input-inline').each(function(index, element) {
                $(element).find('input[type=text]').val('');
                $(element).find('select').val('');
            })
            tableIns.reload({
                where: {
                    'type': '',
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
    });
</script>
